<template>
  <div>
    <h5 class="text-muted">当前任务：待受理项目列表</h5>
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <select-address
          v-model="params.address_code"
          clearable
          auto-top
          placeholder="所属地"
          @change="getData()"
        ></select-address>
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="params.customer_name"
          @keyup.enter.native="getData()"
          :clearable="true"
          placeholder="主体名称查询"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="params.lender_idcard"
          :clearable="true"
          placeholder="身份证号码"
          @keyup.enter.native="getData()"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>
    <c-table
      border
      class="table-sm"
      v-loading="loading"
      :stripe="false"
      :columns="tableColumns"
      :data="tableData"
    >
      <template v-slot:status="scope">
        <span v-if="+scope.row.is_approval === -1">延时待受理</span>
        <span v-else>未受理</span>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <el-dialog
      :visible.sync="reportVisible"
      :close-on-click-modal="false"
      :before-close="handleCreditClose"
      top="30px"
      width="80%"
    >
      <credit-file :query-id="queryId"></credit-file>
    </el-dialog>

    <el-dialog
      :visible.sync="visible"
      :close-on-click-modal="false"
      title="待受理说明"
      top="10%"
      width="600px"
    >
      <div class="card text-indent">
        <span v-if="reason">{{ reason }}</span>
        <span v-else>暂无机构处理， 请等待或者联系相关担保机构。</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SelectAddress from '@/components/select/SelectAddress'
import { enumProjectType } from '@/gov/plugins/enum'
import CreditFile from '@/gov/components/creditFile/GovCredit'
export default {
  components: {
    SelectAddress,
    CreditFile,
  },
  props: {},
  data() {
    return {
      loading: false,
      reportVisible: false,
      reason: '',
      visible: false,
      queryId: '',
      tableCount: 0,
      params: {
        index: 1,
        size: 10,
        'claim_status.eq': 0,
        'is_approval.in': '0,-1',
        'recommend_status.eq': 1,
        'submit_type.eq': 1,
        customer_name: '',
        lender_idcard: '',
        address_code: '',
      },
      tableName: 'customer_related',
      tableColumns: [
        {
          attrs: { label: '项目名称', prop: 'customer_name', minWidth: '160px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '地址', prop: 'address', minWidth: '160px' } },
        {
          attrs: { label: '项目类型', prop: 'project_type', align: 'center' },
          process: v => enumProjectType[v],
        },
        { attrs: { label: '负责人', prop: 'corp_name' } },
        { attrs: { label: '联系电话', prop: 'mobile_no' } },
        { attrs: { label: '申请金额', prop: 'apply_funds', align: 'center' } },
        { attrs: { label: '申请年限', prop: 'load_years', align: 'center' } },
        { attrs: { label: '推荐时间', prop: 'recommend_time' } },
        { attrs: { label: '项目状态', align: 'center' }, slot: 'status' },
        {
          attrs: { label: '操作', align: 'center', minWidth: '100px' },
          operations: [
            {
              content: '待受理说明',
              icon: 'fa fa-search',
              event: this.handleDetail,
            },
            { content: '档案卡', icon: 'fa fa-file', event: this.handleView },
          ],
        },
      ],
      tableData: [],
    }
  },
  computed: {},
  watch: {
    $route(route, oldroute) {
      if (route.name === 'missionNclaim') {
        this.getData()
      }
    },
  },
  mounted() {},
  created() {
    this.params.address_code = this.$utils.getAddressCode()
    this.getData()
  },
  methods: {
    handleView(row) {
      this.queryId = row.customer_related_id
      this.reportVisible = true
    },
    handleDetail(row) {
      this.visible = true
      this.reason = row.pre_approval_des
    },
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params)
        .then(res => {
          this.tableData = res && res.data && res.data.data
          this.tableCount = (res && res.data && res.data.totalCount) || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleCreditClose() {
      this.reportVisible = false
      this.getData(this.params.index)
    },
  },
}
</script>
<style lang="scss" scoped>
.text-indent {
  font-size: 1.2rem;
  text-indent: 2.4rem;
  min-height: 150px;
  padding: 10px;
}
</style>
